<template>
  <div class="rank">
    <Loading v-if="loading"></Loading>
    <template v-else>
      <div class="official">
        <div class="index">
          <h1><img src="../assets/c1w.png" alt="" /> 官方榜</h1>
          <ul>
            <RankList
              v-for="(item, index) in offList"
              :key="item.id"
              :item="item"
              :updateFrequency="item.updateFrequency"
              :rankColor="rankColor[index]"
              @click.native="$router.push('/rankdetails?id=' + item.id)"
            ></RankList>
          </ul>
        </div>
      </div>
      <div class="world">
        <h1>精选榜</h1>
        <ul>
          <OtherRank
            v-for="item in woList"
            :key="item.id"
            :item="item"
            @click.native="$router.push('/rankdetails?id=' + item.id)"
          ></OtherRank>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
import RankList from "@/components/RankList.vue";
import Loading from "@/components/Loading.vue";
import OtherRank from "@/components/OtherRank.vue";

export default {
  components: {
    RankList,
    Loading,
    OtherRank,
  },
  data: function () {
    return {
      offList: [],
      woList: [],
      loading: true,
      rankColor: [
        { b: "#F4E1E8", c: "#E82E77" },
        { b: "#E0EBEA", c: "#26978B" },
        { b: "#E2E7F0", c: "#386FC0" },
        { b: "#F3E0E0", c: "#E32424" },
      ],
    };
  },
  created: function () {
    this.axios.get("https://apis.netstart.cn/music/toplist").then((res) => {
      this.offList = res.data.list.filter((ele) => ele.ToplistType);
      this.woList = res.data.list.filter((ele) => !ele.ToplistType).slice(0, 9);
      this.loading = false;
    });
  },
  methods: {},
  watch: {},
};
</script>

<style lang="less" scoped>
.rank {
  background-color: #f5f5f5;
  h1 {
    font-size: 20px;
    font-weight: bold;
    img {
      height: 20px;
      width: auto;
      vertical-align: middle;
      border-radius: 50%;
    }
  }
  .official {
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 10px;
  }
  .world {
    border-radius: 10px;
    margin-top: 20px;
    padding: 20px 15px;
    background-color: #fff;
    border-radius: 10px;
    h1 {
      margin-bottom: 10px;
    }
    ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}
</style>
